{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Parameterized Drawing\n", "\n", "## Review\n", "\n", "Last week we saw that we can make simple drawings by using functions like `rect()`, `ellipse()`, and `triangle()`:" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_1\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_1\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #1:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #1 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "rect(10, 30, 25, 50);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Setup and Draw\n", "\n", "Now, we learn about creating two special functions, `setup()` and `draw()`:" ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_3\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_3\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_3\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_3\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #3:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #3 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "void setup() {\n", " size(500, 500);\n", "}\n", "\n", "void draw() {\n", " rect(10, 30, 20, 50);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Notice that we put our old drawing functions inside the curly brackets of the draw function.\n", "\n", "One big difference is that in the original drawing, the rectangle was drawn once. In this new version, the `draw()` is called over and over forever. That means that this rectangle is being redrawn about 30 times a second!\n", "\n", "Why would we want to do that?\n", "\n", "Consider the following code:" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_7\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_7\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_7\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_7\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #7:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #7 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "void setup() {\n", " \n", "}\n", "\n", "void draw() {\n", " background(0);\n", " //rect(mouseX - 10, mouseY - 25, 20, 50);\n", " ellipse(mouseX, mouseY, 20, 50);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If you move your mouse around in the canvas, what happens? Why? How could you make this better?" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Parameterized Face\n", "\n", "In Chapter 2, we see how to draw a \"parameterized\" face. That simply means that the face is being drawn based on a single \"parameter\"... head size.\n", "\n", "First, let's take a look at the original code:" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_8\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_8\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_8\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_8\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #8:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #8 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "/*------------------------------------------------------------\n", "Copyright (c) 2013, friends of Ed (An Apress Company)\n", "All rights reserved.\n", "\n", "The code provided here accompanies the book:\n", "\n", "Processing: Creative Coding and Generative Art in Processing 2\n", "By Ira Greenberg, Dianna Xu, and Deepak Kumar\n", "friends of Ed (An APress Company), 2013\n", "ISBN-13 978-1430244646\n", "Please refer to the associated README for a full disclaimer.\n", "------------------------------------------------------------*/\n", "// algorithmic_face.pde, chapter 2\n", "// Algorithmic approach to drawing a face.\n", "\n", "// Simple Algorithmic Face\n", "size(600, 800);\n", "background(0);\n", "stroke(255);\n", "noFill();\n", "// draw ellipses from top left corner\n", "ellipseMode(CORNER); \n", "\n", "// BEGIN DECLARE/INITIALIZE VARIABLES\n", "// HEAD \n", "float headHeight = 600;\n", "float headWidth = headHeight*5/7;\n", "float head_x = (width-headWidth)/2;\n", "float head_y = (height-headHeight)/2;\n", "\n", "// EYES\n", "float eyeWidth = headWidth/5;\n", "float eyeHeight = eyeWidth/2;\n", "float irisDiam = eyeHeight;\n", "float pupilDiam = irisDiam/3;\n", "float eye_y = head_y+headHeight/2-eyeHeight/2;\n", "// left\n", "float leftEye_x = head_x+eyeWidth;\n", "float leftIris_x = leftEye_x + eyeWidth/2-irisDiam/2;\n", "float leftPupil_x = leftEye_x + eyeWidth/2-pupilDiam/2;\n", "// right\n", "float rightEye_x = head_x+eyeWidth*3;\n", "float rightIris_x = rightEye_x + eyeWidth/2-irisDiam/2;\n", "float rightPupil_x = rightEye_x + eyeWidth/2-pupilDiam/2;\n", "\n", "//EYEBROWS\n", "float eyeBrowWidth = eyeWidth*1.25;\n", "float eyeBrowHeight = eyeHeight/4;\n", "float eyeBrow_y = eye_y - eyeHeight - eyeBrowHeight/2;\n", "// left\n", "float leftEyeBrow_x = leftEye_x - (eyeBrowWidth-eyeWidth);\n", "// right\n", "float rightEyeBrow_x = rightEye_x;\n", "\n", "// NOSE\n", "float nose_x = head_x+eyeWidth*2;\n", "float nose_y = head_y + headHeight - headHeight/4;\n", "\n", "// MOUTH\n", "float mouthWidth = eyeWidth*1.5;\n", "float mouthHeight = headHeight/12;\n", "float mouth_x = leftIris_x+irisDiam/2+eyeWidth/4;\n", "float mouth_y = nose_y + mouthHeight;\n", "\n", "// EARS\n", "float earWidth = eyeHeight*1.5;\n", "float earHeight = headHeight/4;\n", "float ear_y = eyeBrow_y;\n", "// left\n", "float leftEar_x = head_x-earWidth/2;\n", "// right\n", "float rightEar_x = head_x+headWidth-earWidth/2;\n", "\n", "// BEGIN DRAWING\n", "// Draw head\n", "ellipse(head_x, head_y, headWidth, headHeight); \n", "// left eye\n", "ellipse(leftEye_x, eye_y, eyeWidth, eyeHeight);\n", "// Draw left iris\n", "ellipse(leftIris_x, eye_y, irisDiam, irisDiam);\n", "// Draw left pupil\n", "ellipse(leftPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", "// Draw right eye\n", "ellipse(rightEye_x, eye_y, eyeWidth, eyeHeight); \n", "// Draw right iris\n", "ellipse(rightIris_x, eye_y, irisDiam, irisDiam);\n", "// Draw right pupil\n", "ellipse(rightPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", "// Draw left eyebrow\n", "rect(leftEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", "// Draw right eyebrow\n", "rect(rightEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", "// Draw nose\n", "triangle(nose_x, nose_y, nose_x+eyeWidth, nose_y, nose_x + eyeWidth/2, nose_y-eyeWidth);\n", "// Draw Mouth - top lip\n", "arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, PI, TWO_PI);\n", "// Draw Mouth - bottom lip\n", "arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, 0, PI);\n", "// Draw Mouth – crease\n", "line(mouth_x, mouth_y, mouth_x+mouthWidth, mouth_y);\n", "// Draw left ear\n", "arc(leftEar_x, ear_y, earWidth, earHeight, PI/2.3, PI*1.55);\n", "// Draw right ear\n", "arc(rightEar_x, ear_y, earWidth, earHeight, -PI/1.8, PI/1.8);\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Scary!\n", "\n", "But, the power of this code is that we can change a single number, and it will look completely different:" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_9\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_9\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_9\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_9\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #9:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #9 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "/*------------------------------------------------------------\n", "Copyright (c) 2013, friends of Ed (An Apress Company)\n", "All rights reserved.\n", "\n", "The code provided here accompanies the book:\n", "\n", "Processing: Creative Coding and Generative Art in Processing 2\n", "By Ira Greenberg, Dianna Xu, and Deepak Kumar\n", "friends of Ed (An APress Company), 2013\n", "ISBN-13 978-1430244646\n", "Please refer to the associated README for a full disclaimer.\n", "------------------------------------------------------------*/\n", "// algorithmic_face.pde, chapter 2\n", "// Algorithmic approach to drawing a face.\n", "\n", "// Simple Algorithmic Face\n", "size(600, 800);\n", "background(0);\n", "stroke(255);\n", "noFill();\n", "// draw ellipses from top left corner\n", "ellipseMode(CORNER); \n", "\n", "// BEGIN DECLARE/INITIALIZE VARIABLES\n", "// HEAD \n", "float headHeight = 100;\n", "float headWidth = headHeight*5/7;\n", "float head_x = (width-headWidth)/2;\n", "float head_y = (height-headHeight)/2;\n", "\n", "// EYES\n", "float eyeWidth = headWidth/5;\n", "float eyeHeight = eyeWidth/2;\n", "float irisDiam = eyeHeight;\n", "float pupilDiam = irisDiam/3;\n", "float eye_y = head_y+headHeight/2-eyeHeight/2;\n", "// left\n", "float leftEye_x = head_x+eyeWidth;\n", "float leftIris_x = leftEye_x + eyeWidth/2-irisDiam/2;\n", "float leftPupil_x = leftEye_x + eyeWidth/2-pupilDiam/2;\n", "// right\n", "float rightEye_x = head_x+eyeWidth*3;\n", "float rightIris_x = rightEye_x + eyeWidth/2-irisDiam/2;\n", "float rightPupil_x = rightEye_x + eyeWidth/2-pupilDiam/2;\n", "\n", "//EYEBROWS\n", "float eyeBrowWidth = eyeWidth*1.25;\n", "float eyeBrowHeight = eyeHeight/4;\n", "float eyeBrow_y = eye_y - eyeHeight - eyeBrowHeight/2;\n", "// left\n", "float leftEyeBrow_x = leftEye_x - (eyeBrowWidth-eyeWidth);\n", "// right\n", "float rightEyeBrow_x = rightEye_x;\n", "\n", "// NOSE\n", "float nose_x = head_x+eyeWidth*2;\n", "float nose_y = head_y + headHeight - headHeight/4;\n", "\n", "// MOUTH\n", "float mouthWidth = eyeWidth*1.5;\n", "float mouthHeight = headHeight/12;\n", "float mouth_x = leftIris_x+irisDiam/2+eyeWidth/4;\n", "float mouth_y = nose_y + mouthHeight;\n", "\n", "// EARS\n", "float earWidth = eyeHeight*1.5;\n", "float earHeight = headHeight/4;\n", "float ear_y = eyeBrow_y;\n", "// left\n", "float leftEar_x = head_x-earWidth/2;\n", "// right\n", "float rightEar_x = head_x+headWidth-earWidth/2;\n", "\n", "// BEGIN DRAWING\n", "// Draw head\n", "ellipse(head_x, head_y, headWidth, headHeight); \n", "// left eye\n", "ellipse(leftEye_x, eye_y, eyeWidth, eyeHeight);\n", "// Draw left iris\n", "ellipse(leftIris_x, eye_y, irisDiam, irisDiam);\n", "// Draw left pupil\n", "ellipse(leftPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", "// Draw right eye\n", "ellipse(rightEye_x, eye_y, eyeWidth, eyeHeight); \n", "// Draw right iris\n", "ellipse(rightIris_x, eye_y, irisDiam, irisDiam);\n", "// Draw right pupil\n", "ellipse(rightPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", "// Draw left eyebrow\n", "rect(leftEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", "// Draw right eyebrow\n", "rect(rightEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", "// Draw nose\n", "triangle(nose_x, nose_y, nose_x+eyeWidth, nose_y, nose_x + eyeWidth/2, nose_y-eyeWidth);\n", "// Draw Mouth - top lip\n", "arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, PI, TWO_PI);\n", "// Draw Mouth - bottom lip\n", "arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, 0, PI);\n", "// Draw Mouth – crease\n", "line(mouth_x, mouth_y, mouth_x+mouthWidth, mouth_y);\n", "// Draw left ear\n", "arc(leftEar_x, ear_y, earWidth, earHeight, PI/2.3, PI*1.55);\n", "// Draw right ear\n", "arc(rightEar_x, ear_y, earWidth, earHeight, -PI/1.8, PI/1.8);\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Parameterized Functions\n", "\n", "Now, let's combine what you know about `setup()` and `draw()` with this code.\n", "\n", "1. First, put all of the code that is done once inside the `setup()` function\n", "2. Put the rest of the code inside the `draw()` function" ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_10\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_10\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_10\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_10\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #10:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #10 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "/*------------------------------------------------------------\n", "Copyright (c) 2013, friends of Ed (An Apress Company)\n", "All rights reserved.\n", "\n", "The code provided here accompanies the book:\n", "\n", "Processing: Creative Coding and Generative Art in Processing 2\n", "By Ira Greenberg, Dianna Xu, and Deepak Kumar\n", "friends of Ed (An APress Company), 2013\n", "ISBN-13 978-1430244646\n", "Please refer to the associated README for a full disclaimer.\n", "------------------------------------------------------------*/\n", "// algorithmic_face.pde, chapter 2\n", "// Algorithmic approach to drawing a face.\n", "\n", "// Simple Algorithmic Face\n", "\n", "void setup() {\n", " size(600, 800);\n", " background(0);\n", " stroke(255);\n", " noFill();\n", " // draw ellipses from top left corner\n", " ellipseMode(CORNER); \n", "}\n", "\n", "// BEGIN DECLARE/INITIALIZE VARIABLES\n", "// HEAD \n", "\n", "void draw() {\n", " float headHeight = 600;\n", " float headWidth = headHeight*5/7;\n", " float head_x = (width-headWidth)/2;\n", " float head_y = (height-headHeight)/2;\n", "\n", " // EYES\n", " float eyeWidth = headWidth/5;\n", " float eyeHeight = eyeWidth/2;\n", " float irisDiam = eyeHeight;\n", " float pupilDiam = irisDiam/3;\n", " float eye_y = head_y+headHeight/2-eyeHeight/2;\n", " // left\n", " float leftEye_x = head_x+eyeWidth;\n", " float leftIris_x = leftEye_x + eyeWidth/2-irisDiam/2;\n", " float leftPupil_x = leftEye_x + eyeWidth/2-pupilDiam/2;\n", " // right\n", " float rightEye_x = head_x+eyeWidth*3;\n", " float rightIris_x = rightEye_x + eyeWidth/2-irisDiam/2;\n", " float rightPupil_x = rightEye_x + eyeWidth/2-pupilDiam/2;\n", "\n", " //EYEBROWS\n", " float eyeBrowWidth = eyeWidth*1.25;\n", " float eyeBrowHeight = eyeHeight/4;\n", " float eyeBrow_y = eye_y - eyeHeight - eyeBrowHeight/2;\n", " // left\n", " float leftEyeBrow_x = leftEye_x - (eyeBrowWidth-eyeWidth);\n", " // right\n", " float rightEyeBrow_x = rightEye_x;\n", "\n", " // NOSE\n", " float nose_x = head_x+eyeWidth*2;\n", " float nose_y = head_y + headHeight - headHeight/4;\n", "\n", " // MOUTH\n", " float mouthWidth = eyeWidth*1.5;\n", " float mouthHeight = headHeight/12;\n", " float mouth_x = leftIris_x+irisDiam/2+eyeWidth/4;\n", " float mouth_y = nose_y + mouthHeight;\n", "\n", " // EARS\n", " float earWidth = eyeHeight*1.5;\n", " float earHeight = headHeight/4;\n", " float ear_y = eyeBrow_y;\n", " // left\n", " float leftEar_x = head_x-earWidth/2;\n", " // right\n", " float rightEar_x = head_x+headWidth-earWidth/2;\n", "\n", " // BEGIN DRAWING\n", " // Draw head\n", " ellipse(head_x, head_y, headWidth, headHeight); \n", " // left eye\n", " ellipse(leftEye_x, eye_y, eyeWidth, eyeHeight);\n", " // Draw left iris\n", " ellipse(leftIris_x, eye_y, irisDiam, irisDiam);\n", " // Draw left pupil\n", " ellipse(leftPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", " // Draw right eye\n", " ellipse(rightEye_x, eye_y, eyeWidth, eyeHeight); \n", " // Draw right iris\n", " ellipse(rightIris_x, eye_y, irisDiam, irisDiam);\n", " // Draw right pupil\n", " ellipse(rightPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", " // Draw left eyebrow\n", " rect(leftEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", " // Draw right eyebrow\n", " rect(rightEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", " // Draw nose\n", " triangle(nose_x, nose_y, nose_x+eyeWidth, nose_y, nose_x + eyeWidth/2, nose_y-eyeWidth);\n", " // Draw Mouth - top lip\n", " arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, PI, TWO_PI);\n", " // Draw Mouth - bottom lip\n", " arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, 0, PI);\n", " // Draw Mouth – crease\n", " line(mouth_x, mouth_y, mouth_x+mouthWidth, mouth_y);\n", " // Draw left ear\n", " arc(leftEar_x, ear_y, earWidth, earHeight, PI/2.3, PI*1.55);\n", " // Draw right ear\n", " arc(rightEar_x, ear_y, earWidth, earHeight, -PI/1.8, PI/1.8);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "What is different between this code and the original face?\n", "\n", "### Creating your own functions\n", "\n", "Let's move all of that code for drawing a face into its own function, `drawFace()`\n", "\n", "Note that `draw` and `setup` are specially named functions. But `drawFace()` can be named anything." ] }, { "cell_type": "code", "execution_count": 12, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_11\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_11\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_11\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_11\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #11:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #11 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "/*------------------------------------------------------------\n", "Copyright (c) 2013, friends of Ed (An Apress Company)\n", "All rights reserved.\n", "\n", "The code provided here accompanies the book:\n", "\n", "Processing: Creative Coding and Generative Art in Processing 2\n", "By Ira Greenberg, Dianna Xu, and Deepak Kumar\n", "friends of Ed (An APress Company), 2013\n", "ISBN-13 978-1430244646\n", "Please refer to the associated README for a full disclaimer.\n", "------------------------------------------------------------*/\n", "// algorithmic_face.pde, chapter 2\n", "// Algorithmic approach to drawing a face.\n", "\n", "// Simple Algorithmic Face\n", "\n", "void setup() {\n", " size(600, 800);\n", " background(0);\n", " stroke(255);\n", " noFill();\n", " // draw ellipses from top left corner\n", " ellipseMode(CORNER); \n", "}\n", "\n", "// BEGIN DECLARE/INITIALIZE VARIABLES\n", "// HEAD \n", "\n", "void drawFace(float headHeight) {\n", "\n", " //float headHeight = 600;\n", " float headWidth = headHeight*5/7;\n", " float head_x = (width-headWidth)/2;\n", " float head_y = (height-headHeight)/2;\n", "\n", " // EYES\n", " float eyeWidth = headWidth/5;\n", " float eyeHeight = eyeWidth/2;\n", " float irisDiam = eyeHeight;\n", " float pupilDiam = irisDiam/3;\n", " float eye_y = head_y+headHeight/2-eyeHeight/2;\n", " // left\n", " float leftEye_x = head_x+eyeWidth;\n", " float leftIris_x = leftEye_x + eyeWidth/2-irisDiam/2;\n", " float leftPupil_x = leftEye_x + eyeWidth/2-pupilDiam/2;\n", " // right\n", " float rightEye_x = head_x+eyeWidth*3;\n", " float rightIris_x = rightEye_x + eyeWidth/2-irisDiam/2;\n", " float rightPupil_x = rightEye_x + eyeWidth/2-pupilDiam/2;\n", "\n", " //EYEBROWS\n", " float eyeBrowWidth = eyeWidth*1.25;\n", " float eyeBrowHeight = eyeHeight/4;\n", " float eyeBrow_y = eye_y - eyeHeight - eyeBrowHeight/2;\n", " // left\n", " float leftEyeBrow_x = leftEye_x - (eyeBrowWidth-eyeWidth);\n", " // right\n", " float rightEyeBrow_x = rightEye_x;\n", "\n", " // NOSE\n", " float nose_x = head_x+eyeWidth*2;\n", " float nose_y = head_y + headHeight - headHeight/4;\n", "\n", " // MOUTH\n", " float mouthWidth = eyeWidth*1.5;\n", " float mouthHeight = headHeight/12;\n", " float mouth_x = leftIris_x+irisDiam/2+eyeWidth/4;\n", " float mouth_y = nose_y + mouthHeight;\n", "\n", " // EARS\n", " float earWidth = eyeHeight*1.5;\n", " float earHeight = headHeight/4;\n", " float ear_y = eyeBrow_y;\n", " // left\n", " float leftEar_x = head_x-earWidth/2;\n", " // right\n", " float rightEar_x = head_x+headWidth-earWidth/2;\n", "\n", " // BEGIN DRAWING\n", " // Draw head\n", " ellipse(head_x, head_y, headWidth, headHeight); \n", " // left eye\n", " ellipse(leftEye_x, eye_y, eyeWidth, eyeHeight);\n", " // Draw left iris\n", " ellipse(leftIris_x, eye_y, irisDiam, irisDiam);\n", " // Draw left pupil\n", " ellipse(leftPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", " // Draw right eye\n", " ellipse(rightEye_x, eye_y, eyeWidth, eyeHeight); \n", " // Draw right iris\n", " ellipse(rightIris_x, eye_y, irisDiam, irisDiam);\n", " // Draw right pupil\n", " ellipse(rightPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", " // Draw left eyebrow\n", " rect(leftEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", " // Draw right eyebrow\n", " rect(rightEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", " // Draw nose\n", " triangle(nose_x, nose_y, nose_x+eyeWidth, nose_y, nose_x + eyeWidth/2, nose_y-eyeWidth);\n", " // Draw Mouth - top lip\n", " arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, PI, TWO_PI);\n", " // Draw Mouth - bottom lip\n", " arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, 0, PI);\n", " // Draw Mouth – crease\n", " line(mouth_x, mouth_y, mouth_x+mouthWidth, mouth_y);\n", " // Draw left ear\n", " arc(leftEar_x, ear_y, earWidth, earHeight, PI/2.3, PI*1.55);\n", " // Draw right ear\n", " arc(rightEar_x, ear_y, earWidth, earHeight, -PI/1.8, PI/1.8);\n", "}\n", "\n", "void draw() {\n", " drawFace(500);\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Putting it all together\n", "\n", "Finally, we take advantage of the draw function being called over and over again... we change how the face is drawn each time!" ] }, { "cell_type": "code", "execution_count": 14, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_13\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_13\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_13\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_13\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #13:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #13 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "/*------------------------------------------------------------\n", "Copyright (c) 2013, friends of Ed (An Apress Company)\n", "All rights reserved.\n", "\n", "The code provided here accompanies the book:\n", "\n", "Processing: Creative Coding and Generative Art in Processing 2\n", "By Ira Greenberg, Dianna Xu, and Deepak Kumar\n", "friends of Ed (An APress Company), 2013\n", "ISBN-13 978-1430244646\n", "Please refer to the associated README for a full disclaimer.\n", "------------------------------------------------------------*/\n", "// algorithmic_face.pde, chapter 2\n", "// Algorithmic approach to drawing a face.\n", "\n", "// Simple Algorithmic Face\n", "\n", "void setup() {\n", " size(600, 800);\n", " background(0);\n", " stroke(255);\n", " noFill();\n", " // draw ellipses from top left corner\n", " ellipseMode(CORNER); \n", "}\n", "\n", "// BEGIN DECLARE/INITIALIZE VARIABLES\n", "// HEAD \n", "\n", "void drawDoug(float headHeight) {\n", "\n", " //float headHeight = 600;\n", " float headWidth = headHeight*5/7;\n", " float head_x = (width-headWidth)/2;\n", " float head_y = (height-headHeight)/2;\n", "\n", " // EYES\n", " float eyeWidth = headWidth/5;\n", " float eyeHeight = eyeWidth/2;\n", " float irisDiam = eyeHeight;\n", " float pupilDiam = irisDiam/3;\n", " float eye_y = head_y+headHeight/2-eyeHeight/2;\n", " // left\n", " float leftEye_x = head_x+eyeWidth;\n", " float leftIris_x = leftEye_x + eyeWidth/2-irisDiam/2;\n", " float leftPupil_x = leftEye_x + eyeWidth/2-pupilDiam/2;\n", " // right\n", " float rightEye_x = head_x+eyeWidth*3;\n", " float rightIris_x = rightEye_x + eyeWidth/2-irisDiam/2;\n", " float rightPupil_x = rightEye_x + eyeWidth/2-pupilDiam/2;\n", "\n", " //EYEBROWS\n", " float eyeBrowWidth = eyeWidth*1.25;\n", " float eyeBrowHeight = eyeHeight/4;\n", " float eyeBrow_y = eye_y - eyeHeight - eyeBrowHeight/2;\n", " // left\n", " float leftEyeBrow_x = leftEye_x - (eyeBrowWidth-eyeWidth);\n", " // right\n", " float rightEyeBrow_x = rightEye_x;\n", "\n", " // NOSE\n", " float nose_x = head_x+eyeWidth*2;\n", " float nose_y = head_y + headHeight - headHeight/4;\n", "\n", " // MOUTH\n", " float mouthWidth = eyeWidth*1.5;\n", " float mouthHeight = headHeight/12;\n", " float mouth_x = leftIris_x+irisDiam/2+eyeWidth/4;\n", " float mouth_y = nose_y + mouthHeight;\n", "\n", " // EARS\n", " float earWidth = eyeHeight*1.5;\n", " float earHeight = headHeight/4;\n", " float ear_y = eyeBrow_y;\n", " // left\n", " float leftEar_x = head_x-earWidth/2;\n", " // right\n", " float rightEar_x = head_x+headWidth-earWidth/2;\n", "\n", " // BEGIN DRAWING\n", " // Draw head\n", " ellipse(head_x, head_y, headWidth, headHeight); \n", " // left eye\n", " ellipse(leftEye_x, eye_y, eyeWidth, eyeHeight);\n", " // Draw left iris\n", " ellipse(leftIris_x, eye_y, irisDiam, irisDiam);\n", " // Draw left pupil\n", " ellipse(leftPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", " // Draw right eye\n", " ellipse(rightEye_x, eye_y, eyeWidth, eyeHeight); \n", " // Draw right iris\n", " ellipse(rightIris_x, eye_y, irisDiam, irisDiam);\n", " // Draw right pupil\n", " ellipse(rightPupil_x, eye_y+eyeHeight/2-pupilDiam/2, pupilDiam, pupilDiam);\n", " // Draw left eyebrow\n", " rect(leftEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", " // Draw right eyebrow\n", " rect(rightEyeBrow_x, eyeBrow_y, eyeBrowWidth, eyeBrowHeight);\n", " // Draw nose\n", " triangle(nose_x, nose_y, nose_x+eyeWidth, nose_y, nose_x + eyeWidth/2, nose_y-eyeWidth);\n", " // Draw Mouth - top lip\n", " arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, PI, TWO_PI);\n", " // Draw Mouth - bottom lip\n", " arc(mouth_x, mouth_y-mouthHeight/2, mouthWidth, mouthHeight, 0, PI);\n", " // Draw Mouth – crease\n", " line(mouth_x, mouth_y, mouth_x+mouthWidth, mouth_y);\n", " // Draw left ear\n", " arc(leftEar_x, ear_y, earWidth, earHeight, PI/2.3, PI*1.55);\n", " // Draw right ear\n", " arc(rightEar_x, ear_y, earWidth, earHeight, -PI/1.8, PI/1.8);\n", "}\n", "\n", "void draw() {\n", " background(0);\n", " drawDoug(600 - mouseX);\n", "}\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [] } ], "metadata": { "kernelspec": { "display_name": "Calysto Processing", "language": "java", "name": "calysto_processing" }, "language_info": { "codemirror_mode": { "name": "text/x-java", "version": 2 }, "file_extension": ".java", "mimetype": "text/x-java", "name": "java" } }, "nbformat": 4, "nbformat_minor": 0 }